<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>

<body>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 设置props的类型 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

<script type="text/babel">
    class App extends React.Component {

        state = {
            repoName: '',
            repoUrl: ''
        }

        componentDidMount() {
            // console.log('ddd');
            const url = `https://api.github.com/search/repositories?q=r&sort=stars`
            axios.get(url)
                .then(response => {
                    const result = response.data
                    // console.log(response.data);
                    const {name, html_url} = result.items[0]
                    console.log(name, html_url);
                    this.setState({repoName: name, repoUrl: html_url})
                })
            fetch(url).then(response => {
                return response.json();
            }).then(response=>{
                console.log(response);
                const {name, html_url} = response.items[0]
                console.log(name, html_url);
            }).catch(function (error) {
                console.log(error);
            })

        }

        render() {
            const {repoName, repoUrl} = this.state
            if (!repoName) {
                return (
                    <h2>LOADING...</h2>
                )
            } else {
                return (
                    <h2>
                        MOST star repo is
                        <a href={repoUrl}>
                            {repoName}
                        </a>
                    </h2>
                )
            }
        }
    }


    ReactDOM.render(<App msg="太难了"/>, document.getElementById('demo1'))
</script>
</body>

</html>
